<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>API测试平台</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/bootstrapValidator.min.css" rel="stylesheet">
    <link href="/static/css/font-awesome.css" rel="stylesheet"/>
    <style>
        form {margin-top: 30px}
        form * {margin-bottom: 20px}
        body {background-image: url("/static/img/login_bg.jpg"); background-size:cover }
    </style>
</head>
<body>
    <div class="container" style="margin-top: 80px">
        <div class="row">
            <div style="background-color: white;border-radius:5px" class="col-lg-push-3 col-md-push-3 col-sm-push-3 col-lg-5 col-sm-5 col-md-5">
                <form id="signin" method="post" action="/API/signin">
                    <h2 class="text-center">
                        <img src="/static/img/logo_wetest_gaitubao_126x50.jpg">
                    </h2>
                    <h3 class="text-center" style="margin-bottom: 40px"> API 测 试 平 台 </h3>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i style="margin: auto" class="fa fa-user-o fa-fw"></i></span>
                            <input type="text" class="form-control input-lg" id="username" name="username" placeholder="用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i style="margin: auto" class="fa fa-lock fa-fw"></i></span>
                            <input type="password" class="form-control input-lg" name="password" placeholder="密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon"><i style="margin: auto" class="fa fa-repeat fa-fw"></i></span>
                            <input type="password" class="form-control input-lg" name="confirm" placeholder="再次输入密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <button style="height: 200%" type="submit" class="form-control btn btn-primary btn-lg">注册</button>
                    </div>
                    <hr color="	#F0F8FF" style="height: 1px">
                    <div class="form-group">
                        <a href="/login" class="form-control btn btn-default btn-lg" style="height: 200%">登录</a>
                    </div>
                </form>
            </div>
        </div>
        </div>
    </div>

    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/static/js/bootstrapValidator.min.js" type="text/javascript"></script>
    <script src="/static/js/zh_CN.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#signin').bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    {# api/userIsAvailable/#}
                    username:{
                        trigger: "blur",
                        validators: {
                            notEmpty: {
                                message: '请输入用户名'
                            },
                            stringLength: {
                                message: '用户名必须在5到10位之间',
                                max: 10,
                                min: 5
                            },
                            threshold: 5, // 有5个字符以上才发生ajax请求
                            remote: {  // 远程验证 （ 调用请求 返回json {"valid": true} 表示通过 ）
                                message: '用户名已存在',
                                url: '/API/userIsAvailable',
                                data:{
                                    username:function(){return $("#username").val()}
                                }
                            }
                        }
                    },
                    password: {
                        validators: {
                            notEmpty: {
                                message: '请设置初始密码'
                            },
                            stringLength: {
                                message: '密码必须在5到10位之间',
                                max: 10,
                                min: 5
                            }
                        }
                    },
                    confirm: {
                        validators: {
                            notEmpty: {
                                message: '请再次输入密码'
                            },
                            identical: {
                                field: 'password',
                                message: '两次输入的密码应该一致'
                            }
                        }
                    }
                }
            });
        });
    </script>
</body>
</html>